<template>
  <div>
    <el-dialog
      v-el-drag-dialog="{updataFull, updataDialogWidth}"
      :fullscreen="isfullscreen"
      :title="rowData.processName + $t('TASK_LIST')"
      :visible.sync="showDialog"
      :width="setDialogWidth('90%')"
      class="processDialog"
      @close="$emit('close')"
    >
      <div style="padding: 10px;">
        <el-table
          ref="tableBox"
          :data="childrenTaskList"
          style="width: 100%"
          height="500px"
          row-key="taskId"
          default-expand-all
          border
          :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
        >
          <template slot="empty">
            <NullData />
          </template>
          <el-table-column
            :label="$t('TASKNUMBER')"
            show-overflow-tooltip
            prop="taskId"
            width="350"
            align="left"
          />
          <el-table-column :label="$t('TASK_TYPE')" prop="taskType" align="left">
            <template slot-scope="scope">
              <span>{{ setTaskType(scope.row.taskType) }}</span>
            </template>
          </el-table-column>
          <!-- <el-table-column
          :label="$t('PROCESS_NUMBER')"
          show-overflow-tooltip
          prop="processId"
        /> -->
          <el-table-column
            :label="$t('DESCRIPTION')"
            show-overflow-tooltip
            prop="description"
            width="250px"
            align="left"
          />
          <el-table-column
            :label="$t('DEVICE_CODE')"
            width="120"
            prop="afsDeviceId"
            align="left"
          />
          <el-table-column
            :label="$t('DEVICE_NAME')"
            prop="afsDeviceName"
            min-width="200"
            align="left"
          />
          <el-table-column :label="$t('PROGRESS')" prop="progressStr" width="180px" align="left">
            <template slot-scope="scope">
              <el-progress
                :color="scope.row.status === 'FAIL' ? '#F56C6C' : '#67C23A'"
                :percentage="scope.row.progressStr || 0"
              />
            </template>
          </el-table-column>
          <el-table-column
            :label="$t('START_TIME')"
            show-overflow-tooltip
            prop="startTime"
            width="200px"
            align="left"
          />
          <el-table-column
            :label="$t('END_TIME')"
            show-overflow-tooltip
            prop="endTime"
            width="200px"
            align="left"
          >
            <template slot-scope="scope">
              {{ getEndTime(scope.row) }}
            </template>
          </el-table-column>
          <el-table-column :label="$t('STATE')" prop="status" align="left">
            <template slot-scope="scope">
              <span>{{ setTaskStatus(scope.row.status) }}</span>
            </template>
          </el-table-column>
          <el-table-column :label="$t('CREATOR')" prop="creator" align="left" />
          <el-table-column
            :label="$t('CREATION_TIME')"
            show-overflow-toolti
            prop="createTime"
            width="180px"
            align="left"
          />
          <el-table-column :label="$t('OPERATE')" class-name="operate-cell" :width="resetSize(90)" fixed="right" align="left">
            <template slot-scope="scope">
              <el-button
                v-if="scope.row.status !== 'READY' && scope.row.taskDesc === 'sub'"
                type="text"
                size="small"
                @click="showLog(scope.row)"
              >{{ $t('LOG_BTN') }}</el-button>
              <!-- <el-button
                v-if="
                  scope.row.status === 'PROCESS' &&
                    permission.stop &&
                    regionDeviceList.some(i => i === scope.row.afsDeviceId)
                "
                type="text"
                size="small"
                @click="showStopTaskDialog(scope.row)"
              >{{ $t('STOP') }}</el-button> -->
              <el-button
                v-if="
                  scope.row.status === 'READY' &&
                    permission.cancel &&
                    (rowData.bizType === 'TIME_DETECT' || rowData.bizType === 'LINK_DETECT') &&
                    regionDeviceList.some(i => i === scope.row.afsDeviceId)
                "
                type="text"
                size="small"
                @click="showCancelTask(scope.row)"
              >{{ $t('CANCEL') }}</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button size="mini" @click="$emit('close')">{{ $t('CLOSE') }}</el-button>
      </span>
    </el-dialog>
    <Log-Detail :task-data="taskData" :visible.sync="logVisible" @close="logVisible = false" />
  </div>
</template>
<script>
  import { mapGetters } from 'vuex'
  import MainTaskApi from '@/api/oen/MainTaskApi'
  import SubTaskApi from '@/api/oen/SubTaskApi'
  import LogDetail from './LogDetail'

  export default {
    components: {
      LogDetail
    },
    props: {
      visible: {
        type: Boolean,
        default: false
      },
      childrenTaskList: {
        type: Array,
        default: () => []
      },
      rowData: {
        type: Object,
        default: () => {}
      },
      regionDeviceList: {
        type: Array,
        default: () => []
      }
    },
    data() {
      return {
        showDialog: false,
        taskData: {},
        logVisible: false
      }
    },
    computed: {
      ...mapGetters(['dictList', 'taskProcess', 'processList']),
      permission() {
        return this.$store.getters.getAuthData('info:process')
      }
    },
    watch: {
      visible(newVal) {
        this.showDialog = newVal
        if (newVal) {
          // commonmixins.js
          this.tableBoxdoLayout()
        }
      }
    },
    methods: {
      getEndTime(row) {
        let endTime = row.endTime
        if (row.taskDesc === 'main') {
          const lastSubTask = row.subTaskList[row.subTaskList.length - 1]
          endTime = lastSubTask.endTime
        }
        return endTime
      },
      setTaskType(taskType) {
        const data = this.dictList.PROCESS_LIST_TASK_TYPE.find(item => item.value === taskType)
        return data ? data.label : ''
      },
      setTaskStatus(status) {
        const data = this.dictList.PROCESS_TASK_STATE.find(item => item.value === status)
        return data ? data.label : ''
      },
      // 取消任务
      showCancelTask({ taskId, taskDesc }) {
        this.$confirm(this.$t('CANCEL_PROCESS'))
          .then(() => {
            this.cancelTask(taskId, taskDesc)
          })
          .catch(err => {
            console.log(err)
          })
      },
      async cancelTask(taskId, taskDesc) {
        // 操作日志需要的参数
        const logParams = {
          processName: this.rowData.processName,
          taskId: taskId
        }
        const res = await (taskDesc === 'main'
          ? MainTaskApi.cancelMainTask({ mainTaskId: taskId, logParams })
          : SubTaskApi.cancelSubTask({ subTaskId: taskId, logParams }))
        if (res) {
          this.$message.success(this.$t('EXECUTE_RESULT_SUCCESS'))
          this.$emit('loadData')
        }
      },
      showStopTaskDialog({ taskId, taskDesc }) {
        // 停止主任务/子任务提示
        // 显示任务弹窗
        this.$confirm(this.$t('ARE_YOU_SURE_STOP_TASK'))
          .then(() => {
            this.stopTask(taskId, taskDesc)
          })
          .catch(err => {
            console.log(err)
          })
      },
      async stopTask(taskId, taskDesc) {
        // 操作日志需要的参数
        const logParams = {
          processName: this.rowData.processName,
          taskId: taskId
        }
        const res = await (taskDesc === 'main'
          ? MainTaskApi.stopMainTask({ mainTaskId: taskId, logParams })
          : SubTaskApi.stopSubTask({ subTaskId: taskId, logParams }))
        if (res) {
          this.$message.success(this.$t('EXECUTE_RESULT_SUCCESS'))
          this.$emit('loadData')
        }
      },
      showLog(data) {
        this.taskData = data
        this.logVisible = true
      }
    }
  }
</script>
<style lang="scss" scoped></style>
